<template>
  	<div class="withdrawDeposit_container pr-1 pl-1">
		<div class="withdrawDeposit_container_withdraw pl-1 pr-1 br-16">
			<p class="mb-0">{{ $t("发送") }}</p>
			<div class="withdraw_label mb-0">{{ $t("货币") }}</div>
			<div class="withdraw_input mb-1" @click="visible = true">
				<div class="withdraw_input_left">
					<img class="mr-0" :src="currencyImage" alt="">
					<span>{{ currency }}</span>
				</div>
				<img class="goIcon" src="@/image/personalCenter/icon_arrow_you@1x.png" alt=""/>
			</div>
			<div class="withdraw_label mb-0">{{ $t("地址/账户") }}</div>
			<input class="mb-1" v-model="address" type="text"/>
			<div v-if="hasNetwork" class="withdraw_label mb-0">{{ $t("传输网络") }}</div>
			<div v-if="hasNetwork" class="withdraw_input mb-1" @click="popupShow = true">
				<div class="withdraw_input_left">
					<span>{{ networkName }}</span>
				</div>
				<img class="goIcon" src="@/image/personalCenter/icon_arrow_you@1x.png" alt=""/>
			</div>


			<div class="withdraw_label mb-0">{{ $t("提现金额") }}</div>
			<div class="withdraw_input mb-0">
				<input v-model="amount" type="number" :placeholder="$t('最低额度 > {min}',{min:Number(minimumAmount).toFixed(4)})"/>
				<div class="withdraw_input_position_btn" @click="withdrawClick()">{{$t('全部') }}</div>
			</div>

			<div class="withdraw_label mb-1">
				<span class="mr-0">{{ $t("账户余额") }}</span>
				<span class="money">{{ Number(balance).toFixed(2)+' '+ currency}}</span>
			</div>

			<div class="withdraw_rule_label mb-2">{{ content }}</div>
			<button class="withdrawDeposit_container_withdraw_btn" @click="withdrawConfirm">{{ $t("确认提现") }}</button>
		</div>
		<ComWithdrawSelectCoin :visible="visible" :coinsList="currencyList" :atPresent="currency" @close="modalClose" @criminal="selectCurrency"></ComWithdrawSelectCoin>

		<van-popup v-model="popupShow" position="bottom" :style="{ height: 'auto' }" >
			<div v-for="(item, index) in networkList" :key="index" class="sex_box" @click="changeNetwork(item.id)">
				<div class="left_title">{{ item.name }}</div>
			</div>
			<div class="btns" @click="popupShow = false">{{ $t("取消") }}</div>
		</van-popup>
	</div>
</template>

<script>
import ComWithdrawSelectCoin from "@/components/comWithdrawSelectCoin"
import { getWithdraw , withdraw } from '@/request/personalCenter'
import { confirmDialog } from '@/utils'
import BusinessUtils from '@/utils/business'
export default {
	name: 'WithdrawDeposit',
	components:{
		ComWithdrawSelectCoin
	},
	data() {
		return {
			currencyList: [],

			currency: '',
			networkId: null,
			enterCurrency: '',

			hasNetwork: false,

			amount: null,
			address:'',

			visible: false,
			popupShow: false,
		}
	},
	mounted() {
		this.enterCurrency = this.$route.params.currency ? this.$route.params.currency : 'USDT'
		this.getWithdrawInfo()
	},
	computed:{
		content(){
			if(this.hasNetwork){
				let network = this.networkList.find(item => item.id == this.networkId);
				if (network) {
					return this.$t("withdraw_rule_"+network.shortName,{fee: network.fee,currency: this.currency})
				}else{
					return ''
				}
			}else{
				let currencyInfo = this.currencyList.find(item => item.name == this.currency);
				if(currencyInfo){
					let fee = currencyInfo.fee;

					//这里多语言的部分，SAT的是百分比，SUSD的是固定值
					//现在SUSD也改为百分比了，所以直接使用了SAT的翻译
					return this.$t("withdraw_rule_"+"SAT",{fee: fee,currency: this.currency})
				}else{
					return ''
				}
			}
		},

		minimumAmount() {
			if(this.hasNetwork){
				const network = this.networkList.find(item => item.id == this.networkId);
				if(network){
					return network.min
				}else{
					return 0
				}
			}else{
				let currencyInfo = this.currencyList.find(item => item.name == this.currency);
				if(currencyInfo){
					return currencyInfo.min
				}else{
					return 0
				}
			}
		},

		currencyImage() {
			return BusinessUtils.getCoinIcon(this.currency)
		},

		balance() {
			let currency = this.currencyList.find(item => item.name == this.currency);
			if (currency) {
				return currency.balance
			}else {
				return 0
			}
		},

		networkList() {
			if(this.currency != ''){
				let currency = this.currencyList.find(item => item.name == this.currency);
				if (currency && currency.networkList) {
					return currency.networkList
				} else {
					return []
				}
			}else{
				return []
			}
		},

		networkName() {
			if (this.networkId) {
				let network = this.networkList.find(item => item.id == this.networkId);
				return network ? network.name : '';
			}
			return '';
		}
	},
	watch: {
		currency(newVal,oldVal) {
			if(newVal != oldVal){
				if(newVal){
					let currencyInfo = this.currencyList.find(item => item.name == newVal);
					if(currencyInfo){
						this.hasNetwork = currencyInfo.networkList && currencyInfo.networkList.length > 0;
						this.networkId = this.hasNetwork ? currencyInfo.networkList[0].id : null;
					}else{
						this.hasNetwork = false;
						this.networkId = null;
					}
				}else{
					this.networkId = null;
				}
			}
		},
	},
	methods:{
		getWithdrawInfo(){
			// 提现信息
			getWithdraw({}).then(res=>{
				if(res.code == 1){
					let tempCurrencyList = []
					for(let i = 0;i < res.data.icon_list.length;i++){
						let currencyData = res.data.icon_list[i]
						let currencyInfo = {}
						currencyInfo.id = currencyData.id
						currencyInfo.name = currencyData.name
						currencyInfo.min = currencyData.min_money
						currencyInfo.fee = currencyData.fee

						tempCurrencyList.push(currencyInfo)
					}
					

					for(let key in res.data.user_info){
						let currency = key.toUpperCase();
						let currencyData = tempCurrencyList.find(item => item.name == currency)
						if(currencyData){
							currencyData.balance = res.data.user_info[key]
						}
					}


					for(let i = 0;i < res.data.pay_network.length;i++){
						let networkData = res.data.pay_network[i]
						let networkInfo = {}
						networkInfo.id = networkData.id
						networkInfo.name = networkData.name
						networkInfo.min = networkData.min_total
						networkInfo.shortName = networkData.value
						networkInfo.fee = networkData.rate

						let currencyData = tempCurrencyList.find(item => item.id == networkData.type)
						if(currencyData){
							if(currencyData.networkList == undefined){
								currencyData.networkList = []
							}
							currencyData.networkList.push(networkInfo)
						}
					}

					if(this.currency == ''){
						if(this.enterCurrency != ''){
							let currencyIndex = tempCurrencyList.findIndex(item => item.name == this.enterCurrency.toUpperCase())
							if(currencyIndex !== -1){
								this.currency = tempCurrencyList[currencyIndex].name
							}else{
								this.currency = tempCurrencyList[0].name
							}
						}else{
							let currencyIndex = 0
							let currencyInfo = tempCurrencyList[currencyIndex]
							this.currency = currencyInfo.name
						}
					}

					this.currencyList = tempCurrencyList
				}else{
					this.$toast.fail(res.msg)
				}
			})
		},

		modalClose(){
			// 关闭
			this.visible = false
		},
		selectCurrency(val){
			// 反选
			if(val.name != this.currency){
				this.currency = val.name
				this.modalClose()
			}
		},
		changeNetwork(val){
			this.networkId = val
			this.popupShow = false
		},
		withdrawClick(){
			this.amount = Number(this.balance).toFixed(2);
		},
		async withdrawConfirm(){
			let amount = Number(this.amount)
			// 确认体现，对接接口
			if(amount <= 0 || amount <= this.minimumAmount || amount > Number(this.balance)){
				this.$toast.fail(this.$t('请输入正确的提现金额'))
				return
			}
			const result = await confirmDialog({
				title: this.$t('请输入支付密码'),
				confirmText: this.$t('确认'),
				cancelText: this.$t('取消'),
			})
			
			if (result) {
				let id
				this.currencyList.forEach(item => {
					if(item.name == this.currency){
						id = item.id
					}
				})

				if (!id) {
					this.$toast.fail(this.$t('不支持的货币类型'));
					return;
				}

				let data = {
					pay_network: this.networkId,
					tokenid: id,
					address: this.hasNetwork ? this.address : '',
					ip_user_id: this.hasNetwork ? '' : this.address,
					money: Number(amount),
					paypassword: result,
					goog_secret: '',
				}
				// 用户点击了确认
				withdraw(data).then(res=>{
					if(res.code == 1){
						this.$toast.success(this.$t('成功'))
						this.amount = '0'
						this.$router.back()
					}else{
						this.$toast.fail(res.msg)
					}
				})
			} else {
				// 用户点击了取消
				console.log('取消')
			}
		}
	}
}
</script>

<style>

</style>